<template>
    <div>
        订单审批
        <!--1.多条件查询栏 -->
        <el-form :inline="true" :model="orderSearch" class="demo-form-inline" style="margin-top: 20px;">
            <!-- 搜索栏第一行 -->
            <el-row style="text-align: left;">
                <el-col :span="20" :offset="2">
                    <el-form-item label="订单编号">
                        <el-input v-model="orderSearch.orderno" placeholder="订单编号"></el-input>
                    </el-form-item>
                    <el-form-item label="客户姓名">
                        <el-input v-model="orderSearch.name" placeholder="客户姓名"></el-input>
                    </el-form-item>
                    <el-form-item label="活动时间">
                        <el-date-picker v-model="ordertime.date" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss"
                            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="dateFormat">
                        </el-date-picker>
                    </el-form-item>

                    <el-form-item>
                        <el-button icon="el-icon-search" type="primary" circle @click="search()"></el-button>

                        <el-button type="primary" @click="clearForm()">清空</el-button>
                    </el-form-item>

                </el-col>
            </el-row>
            <!-- 搜索栏第二行 -->
            <el-row style="text-align: left;">
                <el-col :span="3" :offset="21">
                    <el-button type="success" plain round @click="batchChecked()">批量审批</el-button>
                </el-col>

            </el-row>
        </el-form>

        <!--2.订单表格-->
        <el-row style="margin-top: 30px;">
            <el-col :span="22" :offset="1">
                <template>
                    <el-table :data="orderList" style="width: 100%" @selection-change="handleSelectionChange" :row-key="getRowKey"  :expand-row-keys="expandedRows" @expanded="handleExpand">
                        <el-table-column type="expand" >
                            <template slot-scope="props" >
                                <el-table :data="props.row.orderDetails" style="margin-left: 200px;">
                                    <el-table-column property="name" label="商品名称" width="150"></el-table-column>
                                    <el-table-column property="num" label="商品数量" width="200"></el-table-column>
                                    <el-table-column label="商品单价" width="200">
                                        <template slot-scope="scope">
                                            {{ (scope.row.sale_price).toFixed(2)}}
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="总计">
                                        <template slot-scope="scope">
                                            {{ (scope.row.num * scope.row.sale_price).toFixed(2)}}
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </template>
                        </el-table-column>
                        <el-table-column type="selection" width="55">
                        </el-table-column>
                        <el-table-column label="订单编号" width="150">
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.orderno }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="订单客户" width="120">
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.name }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="收货地址" width="170">
                            <template slot-scope="scope">
                                <el-tag size="medium">{{ scope.row.address }}</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="总金额" width="100">
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ (scope.row.totalmoney ).toFixed(2)}}</span>
                            </template>
                        </el-table-column>

                        <el-table-column label="订单状态" width="100">
                            <template slot-scope="scope">
                                <div style="margin-left: 10px" :class="binClass(scope.row.status)">
                                    {{binConter(scope.row.status)}}</div>
                            </template>
                        </el-table-column>

                        <el-table-column label="下单时间" width="200">
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.ordertime }}</span>
                            </template>
                        </el-table-column>


                        <el-table-column label="审批" align="center">
                            <template slot-scope="scope">
                                <el-button type="success" icon="el-icon-check" round :disabled="isDisabled(scope.row)"
                                    size="mini" @click="handleChecked(scope.$index, scope.row)">审批</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>

            </el-col>



        </el-row>

        <!--3.分页 -->
        <el-row style="text-align: center;margin-top: 50px;">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="orderSearch.page" :page-sizes="[2, 4]" :page-size="orderSearch.size"
                layout="prev, pager, next, jumper,total, sizes" :total="total">
            </el-pagination>
        </el-row>





    </div>
</template>


<script>
import axios from 'axios';



export default{
    data(){
        return{
            expandedRows: [],
            isPageChangeToOne:true,
            //1.搜索栏数据
            orderSearch:{
                status:0,
                page:1,
                size:2,
                
            },     
            ordertime: {
                starttime:'',
                endtime:'',
                date:''
            },

            // 2.表格数据
            orderList:[],
            selection:[],
            

            //3.分页数据（4个）  
            total:0,
            totalPage:0,

           


        }
    },
    methods:{
        //1.搜索栏函数
        search(){   
            this.orderSearch.starttime=this.ordertime.starttime
            this.orderSearch.endtime=this.ordertime.endtime

            if(this.isPageChangeToOne){
                this.orderSearch.page=1
            }
            this.$axios.post("order/findAll",this.orderSearch).then(respData=>{
                console.log(respData)
                this.orderList=respData.data.data.data
                this.total=respData.data.data.total
                this.totalPage=respData.data.data.totalPage
                console.log("111")
                console.log(this.orderList)

                for (let order of this.orderList) {

                    console.log("112")
                    console.log(order)
                    this.$axios.get("order/findById/" + order.id).then(respData => {
                        console.log("113")
                        order.orderDetails = respData.data.data
                    })
                }
            })  

            
        },
        batchChecked(){
            if(this.selection.length ==0){
                    //弹出错误提示
                    this.$message({
                        message: '您还未选择要审批的数据!',
                        type: 'warning'
                    });
                    return;

                } 
                  //b.定义一个字符串用于拼接id
                  var ids="";
                for(var i=0;i<this.selection.length;i++){
                    ids+=this.selection[i].id;
                    if(i<this.selection.length-1){
                        ids+=",";
                    }
                }
                console.log(ids);
                //c.发动异步请求
                this.$axios.get("/order/batchChecked/"+ids).then(respData=>{
                    //批量删除成功
                    if(respData.data.data){
                        //弹出成功提示
                        this.$message({
                            message: '批量审批成功!',
                            type: 'success'
                        });
                        //清空多选
                        this.selection = [];
                       


                    }
                     //重新加载页面
                     this.search()
                });          

        },
        clearForm(){
            this.orderSearch.orderno=null;
            this.orderSearch.name=null;
            this.orderSearch.status=null;
            this.ordertime={}
            this.search()

        },
        dateFormat(picker){
             this.ordertime.starttime=picker[0];
             this.ordertime.endtime=picker[1]
        },




        //2.表格函数
        handleSelectionChange(){

        },
   
        handleChecked(index,row){
            this.$axios.put("order/checkOrder/"+row.id).then(respData=>{
                if(respData.data.data){
                    this.$message({
                        message:"订单审核成功！",
                        type:"success"
                    })

                    this.search()
                }
            })
        },
        findDetails(row){
            console.log(row)
            this.lookup(row)
        },
        isDisabled(row){
            if(row.status==0){
                return false
            }else{
                return true
            }
        },
         //订单状态数据回显
         binConter(status){
                
                switch (status) {
                    case 0:
                        return '未审核';
                    case 1:
                        return '已审核';
                    case 2:
                        return '已发货';
                    case 3:
                        return '退货中';  
                    default:
                        return '';
                }
            },
            binClass(status){
                switch (status) {
                    case 0:
                        return 'tagblue0';
                    case 1:
                        return 'tagblue1';
                    case 2:
                        return 'tagblue2';
                    case 3:
                        return 'tagblue3';
                    default:
                        return '';
                }
            },




        

        //3.分页函数
        handleSizeChange(size){
            this.orderSearch.size=size;
            this.orderSearch.page=1
            this.search()
        },
        handleCurrentChange(page){
            this.isPageChangeToOne=false;
            this.orderSearch.page=page;
            this.search()
            this.isPageChangeToOne=true
        } ,
        handleExpand(expandedRows) {
            this.expandedRows = expandedRows;
          
        },
    getRowKey(row) {
      return row.id; // 使用 name 字段作为行标识符
    },




        
     
     

    },
    mounted(){
        this.search()
                
    }
   
}
</script>

<style scoped>
  .tagblue0 {
      text-align: center;
      border-radius: 12px;
      background: #E8F8F3;
      border: 1px solid #fa556e;
      color: #fa5563;
  }

  .tagblue1 {
      text-align: center;
      border-radius: 12px;
      background: #E8F8F3;
      border: 1px solid #21BD88;
      color: #21BD88;
  }

  .tagblue2 {
      text-align: center;
      border-radius: 12px;
      background: #E8F8F3;
      border: 1px solid #2e0cd6;
      color: #2e0cd6;
  }

  .tagblue3 {
      text-align: center;
      border-radius: 12px;
      background: #E8F8F3;
      border: 1px solid #f3880d;
      color: #f3880d;
  }

  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>

